<template>
    <div class="main">
        <!-- 日志记录 -->
        <el-card class="box-card">
            <el-form :inline="true" :model="page" class="demo-form-inline">
                <el-form-item label="操作员:">
                    <el-input v-model="page.name" placeholder="请输入姓名" />
                </el-form-item>
                <el-form-item label="操作时间:">
                    <el-date-picker v-model="page.time" type="datetimerange" :shortcuts="shortcuts" range-separator="至"
                        start-placeholder="开始时间" end-placeholder="结束时间" :clearable="true" @change="changeTime"
                        format="YYYY-MM-DD hh:mm:ss" value-format="YYYY-MM-DD hh:mm:ss" />
                </el-form-item>
                <el-form-item label="IP地址:">
                    <el-input v-model="page.ip" placeholder="请输入IP地址" />
                </el-form-item>
                <el-form-item label="日志内容:">
                    <el-input v-model="page.description" placeholder="请输入日志内容" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">搜索</el-button>
                    <el-button type="primary" @click="reset">重置</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="tableData" style="width: 100%" ref="multipleTableRef" max-height="600px" border >
                <el-table-column type="index" width="55" />
                <el-table-column prop="username" label="操作员" align="center" width="100"/>
                <el-table-column prop="createTime" label="操作时间" align="center" width="200"/>
                <el-table-column prop="ip" label="IP地址" align="center" width="200"/>
                <el-table-column prop="description" label="操作内容" align="center" show-overflow-tooltip/>
            </el-table>
            <Pagination v-if="total != 0" :page="page" :total="total" @pageSizeChanged="handlePageSizeChange"
                @currentPageChanged="handleCurrentPageChange" />
        </el-card>
    </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import { logList } from '@/api/login.js'
import Pagination from '@/components/pagination/index.vue' // 引入分页组件

const page = reactive({
    name: "",
    time: [],
    ip: "",
    description: "",
    pageNum: 1,
    pageSize: 10
})
const total = ref(0)
const tableData = reactive([])
const rowData = reactive({
    row: {}
})

// 时间选择器的参数
const shortcuts = reactive([
    {
        text: '最近一周',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            return [start, end]
        },
    },
    {
        text: '最近一个月',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            return [start, end]
        },
    },
    {
        text: '最近三个月',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            return [start, end]
        },
    },
])

// 时间选择
const changeTime = (value) => {
    console.log(value);

}

// 搜索
const onSubmit = () => {
    getList()
}
// 重置
const reset = () => {
    page.name = "";
    page.time = [];
    page.ip = "";
    page.description = "";
    page.pageNum = 1;
    page.pageSize = 10;
    getList()
}
// 分页
const handlePageSizeChange = (val) => {
    page.pageNum = 1
    page.pageSize = val
    getList()
}

const handleCurrentPageChange = (val) => {
    page.pageNum = val
    // page.pageSize = 10
    getList()
}

// 获取列表
const getList = () => {
    tableData.length = 0;
    total.value = 0
    logList(page).then(res => {
        if (res.code == 200) {
            tableData.push(...res.data.records)
            total.value = res.data.total

        }
    })
}





onMounted(() => {
    getList()
})
</script>

<style lang="scss" scoped>
.demo-form-inline {
    width: 100%;
    min-width: 1000px;
    word-wrap: normal;

    ::v-deep .el-date-editor {
        width: 330px !important;
    }
}

.box-card ::v-deep .el-select__wrapper {
    width: 100px;
}

.main {
    padding: 0 5px 5px 5px;
}
</style>